<template>
  <div class="page-teacher_zone">
    <div class="t-header">
      <div class="title">
        <img src="/img/pc/teacher-zone-title.png" alt="" /><span
          >名师排行榜</span
        >
      </div>
      <div class="hot-teacher">
        <div class="item-one" v-if="threeList && threeList[1]" @click="toPath('/teacher-detail?id='+threeList[1].id)">
          <div class="avatar">
            <img v-if="threeList[1].avatar" :src="threeList[1].avatar" alt="">
            <img v-else src="/img/pc/default-avatar.png" alt="">
          </div>
          <img class="level" src="/img/pc/teacher_menus_two.png" alt="">
          <div class="teacher-name">{{threeList[1].acName}}</div>
          <div class="nickname">
            <img src="/img/pc/teacher-jiang.png" alt="">
            <div class="name">{{threeList[1].designation}}</div>
          </div>
          <div class="desc">简介：{{threeList[1].ftIntroduce}}</div>
        </div>
        <div class="item-two" v-if="threeList && threeList[0]" @click="toPath('/teacher-detail?id='+threeList[0].id)">
          <div class="avatar">
            <img v-if="threeList[0].avatar" :src="threeList[0].avatar" alt="">
            <img v-else src="/img/pc/default-avatar.png" alt="">
          </div>
          <img class="level" src="/img/pc/teacher_menus_one.png" alt="">
          <div class="teacher-name">{{threeList[0].acName}}</div>
          <div class="nickname">
            <img src="/img/pc/teacher-jiang.png" alt="">
            <div class="name">{{threeList[0].designation}}</div>
          </div>
          <div class="desc">简介：{{threeList[0].ftIntroduce}}</div>
        </div>
        <div class="item-three" v-if="threeList && threeList[2]" @click="toPath('/teacher-detail?id='+threeList[2].id)">
          <div class="avatar">
            <img v-if="threeList[2].avatar" :src="threeList[2].avatar" alt="">
            <img v-else src="/img/pc/default-avatar.png" alt="">
          </div>
          <img class="level" src="/img/pc/teacher_menus_three.png" alt="">
          <div class="teacher-name">{{threeList[2].acName}}</div>
          <div class="nickname">
            <img src="/img/pc/teacher-jiang.png" alt="">
            <div class="name">{{threeList[2].designation}}</div>
          </div>
          <div class="desc">简介：{{threeList[2].ftIntroduce}}</div>
        </div>
      </div>
    </div>
    <div class="teacher-list">
      <div class="content">
        <div class="teacher-title">
          <img src="/img/pc/teacher-list.png" alt="">
          <div>名师推荐</div>
        </div>
        <div class="list-box">
          <div class="list-item" v-for="(item,index) in teacherList" :key="index"  @click="toPath('/teacher-detail?id='+item.id)" :style="{marginRight: ((index+1)%3) == 0 ? '0':'30px'}">
            <div class="item-left">
              <div class="avatar">
                <img v-if="item.avatar" :src="item.avatar" alt="">
                <img v-else src="/img/pc/default-avatar.png" alt="">
              </div>
            </div>
            <div class="item-right">
              <div class="t-name">{{item.acName}}</div>
              <div class="t-school">
                <img src="/img/pc/teacher-jiang.png" alt="">
                <div class="teacher-info">{{item.designation}}</div>
              </div>
              <div class="t-desc">
                简介：{{item.ftIntroduce}}
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            show-elevator
            @on-change="handleChangePage"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getTeacherZone } from "~/api/teacher";
export default {
  data() {
    return {
      page: 1,
      pageSize: 9,
      total: 0,
      threeList:[],
      teacherList:[],
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      }
    })
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    toPath(path) {
      this.$router.push(path);
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
      } else {
        return this.$t("locale.pc.mytest.testTrain.unknow");
      }
    },
    linkTo(path) {
      this.$router.push({
        path
      });
    },
    handleChangePage(page) {
      this.page = page;
      this.getData();
    },
    async getThreeTeacherList() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: 0,
        limit: 3,
      }
      let result = await getTeacherZone(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.threeList = result.data.data.rows;
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    async getData(){
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.pageSize * (this.page - 1) + 3,
        limit: this.pageSize,
      }
      let result = await getTeacherZone(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.teacherList = result.data.data.rows;
        this.total = result.data.data.total;
      } else {
        this.SET_IS_LOADING(false);
      }
    }
  },
  created() {
    this.getThreeTeacherList();
    this.getData();
  }
};
</script>

<style lang="scss">
.page-teacher_zone {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-color: #f2f2f2;
  .t-header {
    width: 100%;
    height: 360px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("/img/pc/teacher-bg.png");
    .title {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50px 0 130px;
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
      img {
        display: block;
        width: 36px;
        height: 33px;
      }
      span {
        margin-left: 10px;
      }
    }
    .hot-teacher {
      width: 1200px;
      height: 308px;
      margin: 0 auto;
      position: relative;
      .item-one{
        position: absolute;
        left: 0;
        top:30px;
        z-index: 1;
        width: 433px;
        height: 220px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px 1px rgba($color: #000000, $alpha: .2);
        cursor: pointer;
        &:hover{
          transform: scale(1.3);
          z-index: 9;
        }
        .avatar{
          position: absolute;
          left: 50%;
          transform: translate(-50%,-50%);
          height: 114px;
          width: 114px;
          border:2px solid #ffffff;
          overflow: hidden;
          border-radius: 50%;
          background-color: #ffffff;
          img{
            width: 100%;
            height: 100%;
            display: flex;
          }
        }
        .level{
          position: absolute;
          width: 131px;
          height: 119px;
          left: 50%;
          top: 16px;
          transform: translate(-50%,-50%);
          display: block;
        }
        .teacher-name{
          margin-top: 78px;
          text-align: center;
          font-size: 22px;
          font-weight: bold;
          line-height: 48px;
          color: #313233;
        }
        .nickname{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: bold;
          line-height: 48px;
          color: #7c7d80;
          img{
            width: 25px;
            height: 23px;
            display: block;
            margin-right: 10px;
          }
        }
        .desc{
          padding: 0 20px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 18px;
          line-height: 27px;
          letter-spacing: 0px;
          color: #adafb3;
        }
      }
      .item-two{
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 2;
        transform: translateX(-50%);
        width: 520px;
        height: 280px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px 1px rgba($color: #000000, $alpha: .2);
        cursor: pointer;
        .avatar{
          position: absolute;
          left: 50%;
          transform: translate(-50%,-50%);
          height: 158px;
          width: 158px;
          border:2px solid #ffffff;
          overflow: hidden;
          border-radius: 50%;
          background-color: #ffffff;
          img{
            width: 100%;
            height: 100%;
            display: flex;
          }
        }
        .level{
          position: absolute;
          width: 181px;
          height: 165px;
          left: 50%;
          top: 16px;
          transform: translate(-50%,-50%);
          display: block;
        }
        .teacher-name{
          margin-top: 110px;
          text-align: center;
          font-size: 26px;
          font-weight: bold;
          line-height: 48px;
          color: #313233;
        }
        .nickname{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          font-weight: bold;
          line-height: 48px;
          color: #7c7d80;
          margin-bottom: 10px;
          img{
            width: 25px;
            height: 23px;
            display: block;
            margin-right: 10px;
          }
        }
        .desc{
          padding: 0 20px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 18px;
          line-height: 27px;
          letter-spacing: 0px;
          color: #adafb3;
        }
      }
      .item-three{
        position: absolute;
        right: 0;
        top: 30px;
        z-index: 1;
        width: 433px;
        height: 220px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px 1px rgba($color: #000000, $alpha: .2);
        cursor: pointer;
        &:hover{
          transform: scale(1.3);
          z-index: 9;
        }
        .avatar{
          position: absolute;
          left: 50%;
          transform: translate(-50%,-50%);
          height: 114px;
          width: 114px;
          overflow: hidden;
          border-radius: 50%;
          background-color: #ffffff;
          border:2px solid #ffffff;
          img{
            width: 100%;
            height: 100%;
            display: flex;
          }
        }
        .level{
          position: absolute;
          width: 131px;
          height: 119px;
          left: 50%;
          top: 16px;
          transform: translate(-50%,-50%);
          display: block;
        }
        .teacher-name{
          margin-top: 78px;
          text-align: center;
          font-size: 22px;
          font-weight: bold;
          line-height: 48px;
          color: #313233;
        }
        .nickname{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: bold;
          line-height: 48px;
          color: #7c7d80;
          img{
            width: 25px;
            height: 23px;
            display: block;
            margin-right: 10px;
          }
        }
        .desc{
          padding: 0 20px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 18px;
          line-height: 27px;
          letter-spacing: 0px;
          color: #adafb3;
        }
      }
    }
  }
  .teacher-list{
    padding: 200px 0 100px;
    .content{
      width: 1200px;
      margin: 0 auto;
      .teacher-title{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: bold;
        color: #666666;
        margin-bottom: 30px;
        img{
          display: block;
          width: 36px;
          height: 36px;
          margin-right: 10px;
        }
      }
      .list-box{
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        .list-item{
          width: 380px;
          height: 280px;
          background-color: #ffffff;
          border-radius: 10px;
          margin-bottom: 30px;
          margin-right: 30px;
          display: flex;
          cursor: pointer;
          .item-left{
            width: 170px;
            height: 280px;
            .avatar{
              width: 121px;
              height: 121px;
              background-color: #adafb3;
              border: solid 4px #ffffff;
              border-radius: 50%;
              margin: 26px auto 0;
              overflow: hidden;
              img{
                display: block;
                width: 100%;
                height: 100%;
              }
            }
          }
          .item-right{
            width: 210px;
            height: 280px;
            padding-top: 30px;
            padding-right: 10px;
            .t-name{
              font-size: 26px;
              font-weight: bold;
              line-height: 48px;
              color: #313233;
            }
            .t-school{
              display: flex;
              align-items: center;
              margin-top: 10px;
              img{
                width: 25px;
                height: 23px;
                display: block;
                margin-right: 10px;
              }
              .teacher-info{
                font-size: 22px;
                font-weight: bold;
                color: #7c7d80;
              }
            }
            .t-desc{
              margin-top: 20px;
              font-size: 16px;
              line-height: 27px;
              color: #adafb3;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
            }
          }
          
        }
      }
      .pagination{
        margin-top: 20px;
        text-align: center;
      }
    }
    
  }
}
</style>
